<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-touch-fullscreen" content="yes">
		<meta name="format-detection" content="telephone=no;email=no">

		<link rel="stylesheet" href="../../css/mui.min.css">
		<link rel="stylesheet" href="../../css/iconfont.css">
		<link rel="stylesheet" href="../../css/style.css">
		<title>我的设置</title>
		<style>
			html,
			body {
				background-color: #efeff4;
			}
			
			.mui-views,
			.mui-view,
			.mui-pages,
			.mui-page,
			.mui-page-content {
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				width: 100%;
				height: 100%;
				background-color: #efeff4;
			}
			
			.mui-pages {
				top: 46px;
				height: auto;
			}
			
			.mui-scroll-wrapper,
			.mui-scroll {
				background-color: #efeff4;
			}
			
			.mui-page.mui-transitioning {
				-webkit-transition: -webkit-transform 300ms ease;
				transition: transform 300ms ease;
			}
			
			.mui-page-left {
				-webkit-transform: translate3d(0, 0, 0);
				transform: translate3d(0, 0, 0);
			}
			
			.mui-ios .mui-page-left {
				-webkit-transform: translate3d(-20%, 0, 0);
				transform: translate3d(-20%, 0, 0);
			}
			
			.mui-navbar {
				position: fixed;
				right: 0;
				left: 0;
				z-index: 10;
				height: 44px;
				background-color: #f7f7f8;
			}
			
			.mui-navbar .mui-bar {
				position: absolute;
				background: transparent;
				text-align: center;
			}
			
			.mui-android .mui-navbar-inner.mui-navbar-left {
				opacity: 0;
			}
			
			.mui-ios .mui-navbar-left .mui-left,
			.mui-ios .mui-navbar-left .mui-center,
			.mui-ios .mui-navbar-left .mui-right {
				opacity: 0;
			}
			
			.mui-navbar .mui-btn-nav {
				-webkit-transition: none;
				transition: none;
				-webkit-transition-duration: .0s;
				transition-duration: .0s;
			}
			
			.mui-navbar .mui-bar .mui-title {
				display: inline-block;
				width: auto;
			}
			
			.mui-page-shadow {
				position: absolute;
				right: 100%;
				top: 0;
				width: 16px;
				height: 100%;
				z-index: -1;
				content: '';
			}
			
			.mui-page-shadow {
				background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, .01) 50%, rgba(0, 0, 0, .2) 100%);
				background: linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, .01) 50%, rgba(0, 0, 0, .2) 100%);
			}
			
			.mui-navbar-inner.mui-transitioning,
			.mui-navbar-inner .mui-transitioning {
				-webkit-transition: opacity 300ms ease, -webkit-transform 300ms ease;
				transition: opacity 300ms ease, transform 300ms ease;
			}
			
			.mui-page {
				display: none;
			}
			
			.mui-pages .mui-page {
				display: block;
			}
			
			.mui-page .mui-table-view:first-child {
				margin-top: 15px;
			}
			
			.mui-page .mui-table-view:last-child {
				margin-bottom: 30px;
			}
			
			.mui-table-view {
				margin-top: 20px;
			}
			
			.mui-table-view span.mui-pull-right {
				color: #999;
			}
			
			.mui-table-view-divider {
				background-color: #efeff4;
				font-size: 14px;
			}
			
			.mui-table-view-divider:before,
			.mui-table-view-divider:after {
				height: 0;
			}
			
			.head {
				height: 40px;
			}
			
			#head {
				line-height: 40px;
			}
			
			.head-img {
				width: 40px;
				height: 40px;
			}
			
			#head-img1 {
				position: absolute;
				bottom: 10px;
				right: 40px;
				width: 40px;
				height: 40px;
			}
			
			.update {
				font-style: normal;
				color: #999999;
				margin-right: -25px;
				font-size: 15px
			}
			
			.mui-fullscreen {
				position: fixed;
				z-index: 20;
				background-color: #000;
			}
			
			.mui-ios .mui-navbar .mui-bar .mui-title {
				position: static;
			}
			
			.mui-switch.mui-active {
				border-color: #159ceb;
				background-color: #159ceb;
			}
			
			.mui-card {
				margin: 15px 0 0;
				border-left: none;
				border-right: none;
				border-radius: 0;
			}
			
			.mui-card .mode-info {
				margin-left: 15px;
				font-size: 14px;
				color: #999;
			}
			
			.mui-content-padded{
				margin: 20px;
			}
			
			.mui-content-padded p {
				line-height: 1.8;
				letter-spacing: -1px;
				text-align: justify;
			}
		</style>
	</head>

	<body class="mui-fullscreen">
		<!--页面主结构开始-->
		<div id="app" class="mui-views">
			<div class="mui-view">
				<div class="mui-navbar navbar-default">
				</div>
				<div class="mui-pages">
				</div>
			</div>
		</div>
		<!--页面主结构结束-->
		<!--单页面开始-->
		<div id="setting" class="mui-page">
			<!--页面标题栏开始-->
			<div class="mui-navbar-inner mui-bar mui-bar-nav">
				<a class="mui-action-back mui-icon iconfont mui-pull-left c-white">&#xe603;</a>
				<h1 class="mui-center mui-title c-white">我的设置</h1>
			</div>
			<!--页面标题栏结束-->
			<!--页面主内容区开始-->
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<ul class="mui-table-view mui-table-view-chevron">
							<li class="mui-table-view-cell" id="fontBtn" style="padding-right: 15px;">
								<a href="javascript:;" style="margin-right: -15px;">字体大小<span class="mui-pull-right" id="fontSize">中</span></a>
							</li>
							<li class="mui-table-view-cell" id="readBtn">
								<a href="#readMode" class="mui-navigate-right">阅读模式</a>
							</li>
							<li class="mui-table-view-cell" style="display: none;">
								夜间模式
								<div class="mui-switch" id="modeSwitch">
									<div class="mui-switch-handle"></div>
								</div>
							</li>
						</ul>
						<ul class="mui-table-view mui-table-view-chevron">
							<li class="mui-table-view-cell">
								推送设置
								<div class="mui-switch mui-active" id="pushSwitch">
									<div class="mui-switch-handle"></div>
								</div>
							</li>
							<li class="mui-table-view-cell" id="clearBtn" style="padding-right: 15px;">
								<a style="margin-right: -15px;">清除缓存
									<span class="mui-pull-right" id="cache" style="display: none;"></span>
								</a>
							</li>
							<!--<li class="mui-table-view-cell">
								<a href="#about" class="mui-navigate-right">关于我们</a>
							</li>-->
						</ul>
					</div>
				</div>
			</div>
			<!--页面主内容区结束-->
		</div>
		<!--单页面结束-->

		<div id="readMode" class="mui-page">
			<div class="mui-navbar-inner mui-bar mui-bar-nav">
				<a class="mui-action-back mui-icon iconfont mui-pull-left c-white">&#xe603;</a>
				<h1 class="mui-center mui-title c-white">阅读模式</h1>
			</div>
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<div class="mui-card">
							<form class="mui-input-group" id="modeRadio">
								<div class="mui-input-row mui-radio">
									<label>智能模式<span class="mode-info">仅WiFi下加载图片</span></label>
									<input id="smartMode" name="radio1" type="radio">
								</div>
								<div class="mui-input-row mui-radio">
									<label>图文模式<span class="mode-info">总是加载图片</span></label>
									<input id="imgMode" name="radio1" type="radio" checked>
								</div>
								<div class="mui-input-row mui-radio">
									<label>文本模式<span class="mode-info">不加载图片</span></label>
									<input id="txtMode" name="radio1" type="radio">
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!--<div id="about" class="mui-page">
			<div class="mui-navbar-inner mui-bar mui-bar-nav">
				<a class="mui-action-back mui-icon iconfont mui-pull-left c-white">&#xe603;</a>
				<h1 class="mui-center mui-title c-white">关于我们</h1>
			</div>
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<div class="mui-content-padded">
							<p style="font-size: 17px;">“临空港新闻”是由武汉临空港经济技术开发区推出的一款新闻客户端。主要为广大公众提供临空港区域内的新闻资讯、政务发布、产经趋势和民生文化等内容服务。
								<br>
								<span style="display: block;margin-top: 5px;">您在这里可以获取最及时深入的政策解读，了解最新鲜好玩的本地风情，随时随地掌握临空港经开区的发展动态。</span>
							</p>
						</div>
					</div>
				</div>
			</div>
		</div>-->
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/mui.view.js"></script>
		<script src="../../js/common.js"></script>
		<script>
			//mui插件初始化
			mui.init({
				beforeback: function() {
					var modeFlag = localStorage.getItem("modeFlag");
					if (modeFlag) {
						plus.navigator.setStatusBarStyle("UIStatusBarStyleBlackOpaque");
						plus.navigator.setStatusBarBackground("#000");
					} else {
						plus.navigator.setStatusBarStyle("UIStatusBarStyleBlackOpaque");
						plus.navigator.setStatusBarBackground("#013b7d");
					}
					return true;
				}
			});
			//初始化单页view
			var viewApi = mui('#app').view({
				defaultPage: '#setting'
			});
			//初始化单页的区域滚动
			mui('.mui-scroll-wrapper').scroll();
			var view = viewApi.view;
			(function($) {
				//处理view的后退与webview后退
				var oldBack = $.back;
				$.back = function() {
					if (viewApi.canBack()) { //如果view可以后退，则执行view的后退
						viewApi.back();
					} else { //执行webview后退
						oldBack();
					}
				};
			})(mui);
			// 扩展API加载完毕，现在可以正常调用扩展API 
			mui.plusReady(function() {
				var isActive = document.getElementById("pushSwitch").classList.contains("mui-active"); //程序运行时推送是否开启
				var modeFlag = localStorage.getItem("modeFlag");
				var readMode = localStorage.getItem("readMode");
				var smartMode = document.getElementById("smartMode");
				var imgMode = document.getElementById("imgMode");
				var txtMode = document.getElementById("txtMode");
				var fontFlag = plus.storage.getItem("fontFlag");
				var fontSize = document.getElementById("fontSize");
				//夜间模式
				if (modeFlag) {
					document.getElementById("modeSwitch").classList.add("mui-active");
					plus.navigator.setStatusBarStyle("UIStatusBarStyleBlackOpaque");
					plus.navigator.setStatusBarBackground("#000");
				} else {
					document.getElementById("modeSwitch").classList.remove("mui-active");
					plus.navigator.setStatusBarStyle("UIStatusBarStyleBlackOpaque");
					plus.navigator.setStatusBarBackground("#159ceb");
				}
				//阅读模式
				switch (readMode) {
					case "1":
						smartMode.checked = true;
						imgMode.checked = false;
						txtMode.checked = false;
						break;
					case "2":
						smartMode.checked = false;
						imgMode.checked = true;
						txtMode.checked = false;
						break;
					case "3":
						smartMode.checked = false;
						imgMode.checked = false;
						txtMode.checked = true;
						break;
				}
				//字体大小
				switch (fontFlag) {
					case "1":
						fontSize.innerText = "小";
						break;
					case "2":
						fontSize.innerText = "中";	
						break;
					case "3":
						fontSize.innerText = "大";
						break;
				}
				pushSwitch(isActive);
				calculateCache();
			});
			mui(".mui-view").on('tap', '.mui-table-view-cell', function() {
				var id = this.getAttribute("id");
				//字体大小
				if (id == "fontBtn") {
					var fontSize = document.getElementById("fontSize");
					showFontSize();
				}
				//清除缓存
				if (id == "clearBtn") {
					plus.cache.clear(function() {
						mui.alert('清理成功', '提示', function() {
							calculateCache();
						});
					});
				}
			});
			// 原生系统选择字体大小
			function showFontSize() {
				plus.nativeUI.actionSheet({
					title: "请选择字号",
					cancel: "取消",
					buttons: [{
						title: "小"
					}, {
						title: "中"
					}, {
						title: "大"
					}]
				}, function(e) {
					if (e.index == 1) {
						fontSize.innerText = "小";
						plus.storage.setItem("fontFlag", "1");
					}
					if (e.index == 2) {
						fontSize.innerText = "中";
						plus.storage.setItem("fontFlag", "2");
					}
					if (e.index == 3) {
						fontSize.innerText = "大";
						plus.storage.setItem("fontFlag", "3");
					}
				});
			}
			//日夜间模式切换
			document.getElementById("modeSwitch").addEventListener("toggle", function(event) {
				if (event.detail.isActive) {
					nightMode();
				} else {
					daytimeMode();
				}
				sendMsg(); //通知所有Webview窗口
			});

			function sendMsg() {
				var wvs = plus.webview.all();
				var ws = plus.webview.currentWebview(); //当前窗口的WebviewObject对象
				var imgws = plus.webview.getWebviewById("images-details.html");
				for (var i = 0; i < wvs.length; i++) {
					if (wvs[i] == ws || wvs[i] == imgws) {
						continue;
					}
					//触发所有页面的night事件
					mui.fire(wvs[i], 'night');
				}
			}
			var brightness;
			//显示遮罩
			function cover(brightness) {
				if (typeof(div) == 'undefined') {
					div = document.createElement('div');
					div.setAttribute('style', 'position:fixed;top:0;left:0;outline:5000px solid;z-index:9999;');
					document.body.appendChild(div);
				} else {
					div.style.display = '';
				}
				div.style.outlineColor = 'rgba(0,0,0,' + brightness + ')';
			}

			function nightMode() {
				cover(brightness = 0.5);
				plus.navigator.setStatusBarStyle("UIStatusBarStyleBlackOpaque");
				plus.navigator.setStatusBarBackground("#000");
				localStorage.setItem("modeFlag", "true");
			}

			function daytimeMode() {
				cover(brightness = 0);
				plus.navigator.setStatusBarStyle("UIStatusBarStyleBlackOpaque");
				plus.navigator.setStatusBarBackground("#159ceb");
				localStorage.removeItem("modeFlag");
			}
			//计算缓存大小
			function calculateCache() {
				plus.cache.calculate(function(size) {
					if (size < 1) {
						size = 0;
					}
					var cacheSize = Math.floor(size / 1024 / 1024);
					document.getElementById("cache").innerHTML = cacheSize + "M";
				});
			}
			//是否开启推送(只针对透传消息)
			document.getElementById("pushSwitch").addEventListener("toggle", function(event) {
				var isActive = event.detail.isActive;
				pushSwitch(isActive);
			});

			function pushSwitch(isActive) {
				if (isActive) {
					pushMessage();
				} else {
					plus.push.setAutoNotification(false);
				}
			}

			function pushMessage() {
				var message = document.getElementById("message");
				// 监听点击消息事件
				plus.push.addEventListener("click", function(msg) {
					plus.runtime.setBadgeNumber(0); //清除程序快捷方式上显示的提示数字
					// 判断是从本地创建还是离线推送的消息
					switch (msg.payload) {
						case "LocalMSG":
							//alert("点击本地创建消息启动：");
							break;
						default:
							//alert("点击离线推送消息启动：");
							break;
					}
				}, false);
				// 监听在线消息事件
				plus.push.addEventListener("receive", function(msg) {
					plus.runtime.setBadgeNumber(0); //清除程序快捷方式上显示的提示数字
					if (msg.aps) { // Apple APNS message
						//alert("接收到在线APNS消息：");
					} else {
						//alert("接收到在线透传消息：");
					}
				}, false);
			}
			/**
			 * 日志输入推送消息内容
			 */
			function logoutPushMsg(msg) {
				if (msg.payload) {
					if (typeof(msg.payload) == "string") {
						alert("payload(String): " + msg.payload);
					} else {
						alert("payload(JSON): " + JSON.stringify(msg.payload));
					}
				} else {
					alert("payload: undefined");
				}
				if (msg.aps) {
					alert("aps: " + JSON.stringify(msg.aps));
				}
			}
			//阅读模式
			mui("#modeRadio").on("tap", ".mui-radio", function() {
				var list = plus.webview.getWebviewById("news_list.html");//列表页
				var collect = plus.webview.getWebviewById("my_collections_list.html");//我的收藏页
				var yx = plus.webview.getWebviewById("yx_sub.html");//临空港印象页
				//var detail = plus.webview.getWebviewById("news-details.html");//图文新闻详情页
				//var topic = plus.webview.getWebviewById("special-topic_sub.html");//专题列表页
				
				if (this.querySelector("input[type='radio']").id == "smartMode") {
					localStorage.setItem("readMode", "1");
				} 
				else if (this.querySelector("input[type='radio']").id == "imgMode") {
					localStorage.setItem("readMode", "2");
				} 
				else {
					localStorage.setItem("readMode", "3");
				}
				//触发事件
				mui.fire(list, 'read');
				mui.fire(collect, 'read');
				mui.fire(yx, 'read');
				//mui.fire(detail, 'read');
				//mui.fire(topic, 'read');
			});
		</script>
	</body>

</html>